import React, { useState } from 'react';
import {
    IonPage, IonContent, IonHeader, IonToolbar, IonTitle,
    IonInput, IonButton, IonItem, IonLabel, IonGrid,
    IonRow, IonCol, IonText
} from '@ionic/react';
import { useAuth } from '../contexts/AuthContext';
import { useTranslation } from 'react-i18next';


interface LoginPageProps {
    onLoginSuccess: (token: string) => void;
}

const LoginPage: React.FC<LoginPageProps> = ({ onLoginSuccess }) => {
    const [email, setEmail] = useState('wjduan@linx-info.com');
    const [password, setPassword] = useState('hello');
    const [error, setError] = useState('');
    const { login, loading } = useAuth();
    const { t } = useTranslation();


    const handleLogin = async () => {
        try {
            await login(email, password);
            onLoginSuccess("skip")
        } catch (err) {
            setError('登录失败，请检查邮箱和密码');
        }
    };

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>{t('project')}</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent className="ion-padding">
                <IonGrid className="ion-justify-content-center">
                    <IonRow className="ion-justify-content-center">
                        <IonCol size="12" sizeMd="8" sizeLg="6">
                            {/* 邮箱输入 */}
                            <IonItem lines="full" className="ion-margin-bottom">
                                <IonLabel position="stacked" className="ion-text-wrap">邮箱</IonLabel>
                                <IonInput type="email" value={email} onIonChange={e => setEmail(e.detail.value!)} clearInput/>
                            </IonItem>

                            {/* 密码输入 */}
                            <IonItem lines="full" className="ion-margin-bottom">
                                <IonLabel position="stacked" className="ion-text-wrap">密码</IonLabel>
                                <IonInput type="password" value={password} onIonChange={e => setPassword(e.detail.value!)} clearInput/>
                            </IonItem>

                            {/* 错误提示 */}
                            {error && (
                                <IonText color="danger" className="ion-text-center ion-margin-bottom">
                                    <p>{error}</p>
                                </IonText>
                            )}

                            {/* 登录按钮 */}
                            <IonButton
                                expand="block"
                                onClick={handleLogin}
                                disabled={loading}
                                className="ion-margin-top"
                            >
                                {loading ? '登录中...' : '登录'}
                            </IonButton>

                            {/* 注册入口 */}
                            <div className="ion-text-center ion-margin-top">
                                <IonText>
                                    <p>还没有账号?</p>
                                </IonText>
                                <IonButton
                                    fill="clear"
                                    size="small"
                                    routerLink="/register"
                                    className="ion-margin-top"
                                >
                                    立即注册
                                </IonButton>
                            </div>
                        </IonCol>
                    </IonRow>
                </IonGrid>
            </IonContent>
        </IonPage>
    );
};

export default LoginPage;